import React, { Component } from 'react';
import {
    View,
    Text,
    Image,
    TextInput,
    TouchableOpacity,
    StyleSheet,
    SafeAreaView,
    Modal,
    ScrollView,
    DeviceEventEmitter,
    FlatList,
    ActivityIndicator
} from 'react-native';

import Constant from '../../utils/Constant'//全局变量
import HttpUtils from "../../utils/HttpUtils";
import HttpUrls from "../../utils/HttpUrls";
import Header from "../../components/header";
import NoData from '../../utils/NoData'
import DatePickerPart from '../../components/Tool/DatePickerPart'



let navigation = null

export default class CarOfferPriceHistoryPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            carId: this.props.route.params.carId,
            list: [],
            isRefresh: false,
            showFoot: 0,
            pageNo: 1,
            createTime:'',
        };
    }

    componentDidMount() {
        this.setState({
            isRefresh: true,
        }, () => {
            this.getList()
        })


    }

    render() {
        navigation = this.props.navigation
        return (
            <View style={styles.container}>
                {/* 顶部导航栏 */}
                <Header navigation={navigation} Title={'报价记录'} hideSepLine={true} bgColor={'#ffffff'} ></Header>

                {/* {this.renderFilter()} */}

                <View style={{ paddingHorizontal: 8, paddingTop: 10, flex: 1 }}>
                    {this.renderCarList()}
                </View>

                <DatePickerPart type={'YYYY-MM-DD'} defaultDate={this.state[this.state.createTime]} show={this.state.showDatePicker} changeState={
                    (val) => { // 时间选择组件显示与否
                        this.setState({
                            showDatePicker: val,
                        })
                    }
                } changeDate={(date) => {
                    this.setState({
                        createTime: date,
                    })
                }} />

            </View>
        );
    }

    renderFilter() {
        return (
            <View style={styles.panel}>
                <TouchableOpacity
                    style={styles.itemBtn}
                    activeOpacity={0.8}
                    onPress={() => {
                        this.setState({
                            showDatePicker: true
                        })
                    }}
                >
                    <Text style={styles.filterText}>{this.state.createTime ? this.state.createTime:'全部时间'}</Text>
                    <Image style={styles.arrowImg} source={require('source/image/comm/down_small_gray.png')} />
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.itemBtn}
                    activeOpacity={0.8}
                    onPress={() => {

                    }}
                >
                    <Text style={styles.filterText}>{'全部类型'}</Text>
                    <Image style={styles.arrowImg} source={require('source/image/comm/down_small_gray.png')} />
                </TouchableOpacity>
            </View>
        )
    }

    renderCarList() {
        return (
            <FlatList
                data={this.state.list}
                renderItem={this.renderItem.bind(this)}
                keyExtractor={(item, index) => index + ''}
                style={{ flex: 1 }}
                extraData={this.state}
                ListFooterComponent={this._renderFooter.bind(this)}
                onEndReached={this._onEndReached.bind(this)}
                onEndReachedThreshold={0.2}
                onRefresh={this.refreshData}
                refreshing={this.state.isRefresh}
                ListEmptyComponent={this.renderEmpty.bind(this)}
            />
        )
    }

    renderEmpty() {
        if (!this.state.isRefresh) {
            return (
                <NoData Desc="暂无数据" style={{ marginTop: gREM(200) }} />
            )
        } else {
            return (
                null
            )
        }
    }

    renderItem({ item, index }) {
        return (
            <View style={[styles.itemBox, {borderTopLeftRadius: index == 0 ? 6:0, borderTopRightRadius: index == 0 ? 6:0, borderBottomLeftRadius: index == this.state.list.length-1 ? 6:0, borderBottomRightRadius: index == this.state.list.length-1 ? 6:0}]}>
                <View style={{ flexDirection: 'column' }}>
                    <Text style={styles.nameText}>{item.quotationUserName + '@' + item.quotationMerchantName}</Text>
                    <Text style={styles.dateText}>{item.createTime}</Text>
                </View>
                <Text style={styles.priceText}>{(item.quotationPrice / (10000 * 100)).toFixed(2) + '万元'}</Text>
            </View>
        )
    }

    _renderFooter() {
        if (this.state.showFoot === 1) {
            return <View style={{ height: Constant.bottomHeight }} />
        } else if (this.state.showFoot === 2) {
            return (
                <View style={styles.footer}>
                    <ActivityIndicator size="small" color="#999" />
                    <Text style={styles.loadMoreTextStyle}>正在加载更多数据...</Text>
                </View>
            );
        } else if (this.state.showFoot === 0) {
            return null;
        }
    }

    _onEndReached() {
        if (this.state.list.length == 0) {
            return;
        }
        if (this.state.showFoot != 0) {
            return null;
        }

        let nextPage = this.state.pageNo + 1

        this.setState({ showFoot: 2, pageNo: nextPage },
            function () {
                this.getList();
            });
    }

    refreshData = () => {

        this.setState({ list: [], isRefresh: true, pageNo: 1 }, function () {
            this.getList();
        })

    }

    getList() {
        let params = {
            pageNo: this.state.pageNo,
            pageSize: 20,
            carId: this.state.carId

        }

        HttpUtils.postRequest(HttpUrls.getQuotationHistory, params)
            .then((result) => {

                let code = result.code
                if (code == 0) {

                    let resultList = result.data.resultList
                    console.log(resultList)
                    if (resultList.length > 0) {
                        if (resultList.length < 20) {
                            this.setState({
                                showFoot: 1
                            })
                        } else {
                            this.setState({
                                showFoot: 0
                            })
                        }

                        this.setState({
                            list: this.state.list.concat(resultList),
                        })

                    } else {

                        this.setState({
                            showFoot: 1
                        })
                    }

                    this.setState({
                        isRefresh: false,

                    })
                } else {
                    this.setState({
                        isRefresh: false,

                    })
                }
            })
            .catch((error) => {
                this.setState({
                    isRefresh: false,

                })
            });
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    panel: {
        width: '100%',
        height: 45,
        backgroundColor: '#fff',
        flexDirection: 'row',
    },
    itemBtn: {
        flex: 1,
        height: '100%',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    filterText: {
        fontSize: 14,
        color: '#696969'
    },
    arrowImg: {
        width: 20,
        height: 20
    },
    footer: {
        flexDirection: 'row',
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f6f6f6'
    },
    loadMoreTextStyle: {
        fontSize: 14,
        color: '#999999',
        marginStart: 10,
    },
    itemBox: {
        width: '100%',
        paddingHorizontal: 16,
        height: 80,
        borderBottomColor: '#e4e4e4',
        borderBottomWidth: 0.3,
        backgroundColor: '#fff',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    nameText: {
        fontSize: 15,
        color: '#333333'
    },
    dateText: {
        marginTop: 12,
        fontSize: 12,
        color: '#999999'
    },
    priceText: {
        fontSize: 18,
        fontWeight: '600',
        color: '#333333'
    }
})